import type {
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
  ScopeContext,
} from '@fast-crud/fast-crud';

import { h } from 'vue';

import { useAccess } from '@vben/access';

import { Tag } from 'ant-design-vue';

import { OnlineApi } from '#/api/devOperation/system/online';
import { PermCode } from '#/enums/perm';
import { useMessage } from '#/hooks/web/useMessage';
import { $t } from '#/locales';
import { indexColumn } from '#/plugins/fast-crud/common';

const { hasPermission } = useAccess();
const permCode = PermCode.devOperation.system.online;

export function createCrudOptions(
  props: CreateCrudOptionsProps,
): CreateCrudOptionsRet {
  const { createConfirm } = useMessage();
  return {
    crudOptions: {
      request: {
        pageRequest: OnlineApi.pageRequest,
        infoRequest: OnlineApi.infoRequest,
      },
      actionbar: { buttons: { add: { show: false } } },
      table: {
        striped: true,
        rowKey: 'id',
      },
      rowHandle: {
        width: 200,
        buttons: {
          view: { show: false },
          edit: { show: false },
          remove: { show: false },
          copy: { show: false },
          kickout: {
            show: hasPermission(permCode.kickout),
            text: '踢下线',
            type: 'link',
            danger: true,
            click: async (context) => {
              createConfirm({
                content: '确定将该用户踢下线吗？',
                iconType: 'warning',
                onOk: async () => {
                  await OnlineApi.kickout(context.row.loginId);
                  props.crudExpose?.doRefresh();
                },
              });
            },
          },
          logout: {
            show: hasPermission(permCode.logout),
            text: '强制注销',
            type: 'link',
            danger: true,
            click: (context) => {
              createConfirm({
                content: '确定将该用户强制注销吗？',
                iconType: 'warning',
                onOk: async () => {
                  await OnlineApi.logout(context.row.loginId);
                  props.crudExpose?.doRefresh();
                },
              });
            },
          },
        },
      },
      form: {},
      columns: {
        ...indexColumn(props.crudExpose),
        username: {
          title: $t('devOperation.tenant.defUser.username'),
          type: 'text',
          search: { show: true },
        },
        nickName: {
          title: $t('devOperation.tenant.defUser.nickName'),
          type: 'text',
          search: { show: true },
        },
        sessionTime: {
          title: '创建时间',
          type: 'text',
          column: {
            cellRender: (scope: ScopeContext) => {
              return [
                h('div', {}, scope.row.sessionTime),
                h('b', { style: 'color: green;' }, scope.row.sessionStr),
              ];
            },
          },
        },
        expireTime: {
          title: '过期时间',
          type: 'text',
          column: {
            cellRender: (scope: ScopeContext) => {
              return [
                h('div', {}, scope.row.expireTime),
                h('b', { style: 'color: green;' }, scope.row.expireStr),
              ];
            },
          },
        },
        count: {
          title: '数量',
          column: {
            cellRender: (scope: ScopeContext) => {
              return h(
                Tag,
                {
                  color: 'success',
                  style: 'cursor: pointer;',
                  onClick: () => {
                    props.context?.tokenRef.value.setData({
                      sessionId: scope.row.id,
                    });
                    props.context?.tokenRef.value.open();
                  },
                },
                () => `${scope.row.terminalList?.length}个`,
              );
            },
          },
        },
      },
    },
  };
}
